<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElInput, ElButton, ElSelect, ElOption, ElPagination, ElMessage } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import { getImageUrl } from '../../utils/system'
import InheritorCard from '../../components/InheritorCard.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 初始搜索参数
const initParams = {
  pageNum: 1,
  pageSize: 12,
  name: "",
  level: ""
}

// 搜索条件
const params = ref({ ...initParams })

// 前端数据
const allInheritorList = ref([
  {
    id: 1,
    name: "钟连盛",
    level: "国家级",
    title: "工艺美术大师",
    region: "北京市",
    introduction: "中国工艺美术大师、北京市特级工艺美术大师、高级工艺美术师、国家级非物质文化遗产景泰蓝制作技艺代表性传承人。",
    avatar: "/images/inheritor1.jpg",
    createTime: "2023-01-15",
    description: "<p>钟连盛，1962年生于北京，满族，中国工艺美术大师、北京市特级工艺美术大师、高级工艺美术师、国家级非物质文化遗产景泰蓝制作技艺代表性传承人、享受国务院政府特殊津贴专家。</p><p>现任北京市珐琅厂有限责任公司总经理兼总工艺美术师，中国民主建国会·民建中央画院工艺美术专业委员会副主任、中国工艺美术协会·金属艺术专业委员会副主任委员兼秘书长、北京民间文艺家协会副主席。</p><p>钟连盛在景泰蓝制作技艺方面有着深深的造诣，他的作品既保持了景泰蓝的传统工艺特色，又融入了现代设计理念，形成了独特的艺术风格。其作品多次在国内外展览中获奖，并被多家博物馆收藏。</p>"
  },
  {
    id: 2,
    name: "姚建萍",
    level: "国家级",
    title: "苏绣艺术大师",
    region: "江苏省",
    introduction: "苏绣国家级代表性传承人，被誉为\"苏绣皇后\"，其作品精细雅致，具有很高的艺术价值。",
    avatar: "/images/inheritor2.jpg",
    createTime: "2023-02-20",
    description: "<p>姚建萍，女，苏州镇湖镇人，苏绣国家级代表性传承人，被誉为\"苏绣皇后\"。</p><p>姚建萍的家乡苏州镇湖镇是享誉中外的苏绣之乡，在这样的环境中成长，她很自然地走上了苏绣这条道路。她的作品精细雅致，将传统苏绣技艺与现代审美理念相结合，形成了独特的艺术风格。</p><p>其代表作品《仕女蹴鞠图》在2019年苏富比拍卖会上拍出1.2亿元高价，成为苏绣艺术品拍卖的新纪录。作品多次在国内外展览中获奖，被南京博物院、苏州博物馆等多家机构收藏。</p><p>现为苏州刺绣研究所高级工艺师，定期举办苏绣技艺培训班，培养新一代苏绣传承人。</p>"
  },
  {
    id: 3,
    name: "冯绍兴",
    level: "国家级",
    title: "陶瓷工艺师",
    region: "景德镇市",
    introduction: "第六批国家级非遗景德镇手工制瓷技艺代表传承人，专注于青花瓷制作，作品远销海外多个国家。",
    avatar: "/images/inheritor3.jpg",
    createTime: "2023-03-10",
    description: "<p>冯绍兴，字宁波，男，1965年出生，江西都昌人，景德镇著名陶艺师，第六批国家级非遗景德镇手工制瓷技艺代表传承人。</p><p>从事陶瓷制作30余年，专注于青花瓷的研究与创作。在继承传统青花瓷技艺的基础上，大胆创新，将现代设计理念融入传统工艺中。</p><p>其作品《山水人家》系列青花瓷在2022年中国陶瓷艺术博览会上荣获金奖，《梅兰竹菊》四君子茶具套装远销欧美、东南亚等20多个国家和地区。</p><p>现为景德镇陶瓷协会会员，景德镇青花瓷研究会理事，景德镇陶瓷职业技术学院客座教授。</p>"
  },
  {
    id: 4,
    name: "祁秀梅",
    level: "国家级",
    title: "剪纸艺术家",
    region: "陕西省",
    introduction: "庆阳民间剪纸艺术大师，陕北剪纸传承人，50年剪纸艺术生涯，作品展现浓郁的民俗文化特色。",
    avatar: "/images/inheritor4.jpg",
    createTime: "2023-04-05",
    description: "<p>祁秀梅，女，庆阳民间剪纸艺术大师，陕北剪纸代表性传承人。</p><p>1986年，祁秀梅应邀到中央美术学院讲学表演，神秘雄奇、大胆夸张、粗犷阳刚的庆阳剪纸一展千年文化魅力，走出沉寂乡野，闪耀在中国民族文化的浩瀚星空。</p><p>她的作品题材广泛，内容丰富，既有传统的吉祥图案，也有反映新时代生活的现代题材。代表作品《陕北风情》系列剪纸被中国美术馆收藏，《延安颂》在第五届中国民间艺术节上荣获金奖。</p><p>多次参加国内外文化交流活动，向世界展示陕北剪纸的独特魅力，为剪纸艺术的传承与发展做出了重要贡献。</p>"
  },
  {
    id: 5,
    name: "黄小明",
    level: "国家级",
    title: "木雕工艺师",
    region: "浙江省",
    introduction: "中国工艺美术大师、国家级非物质文化遗产\"东阳木雕\"代表性传承人，擅长传统建筑木雕，作品工艺精湛，细节丰富。",
    avatar: "/images/inheritor5.jpg",
    createTime: "2023-05-12",
    description: "<p>黄小明，男，中国工艺美术大师、国家级非物质文化遗产\"东阳木雕\"代表性传承人。</p><p>出身木雕世家，自幼学习木雕技艺。多年以来专注于传统建筑木雕的研究与创作，擅长人物、花鸟、山水等各类题材。</p><p>其代表作品《清明上河图》木雕长卷长18米，高1.2米，耗时五年完成，被誉为东阳木雕的经典之作。参与了多个古建筑修复项目，为传统建筑木雕技艺的传承做出了重要贡献。</p><p>现为东阳市木雕协会副会长，浙江省工艺美术大师，浙江理工大学艺术学院客座教授。</p>"
  },
  {
    id: 6,
    name: "王顺明",
    level: "国家级",
    title: "茶艺师",
    region: "福建省",
    introduction: "武夷岩茶(大红袍)制作技艺国家级非物质文化遗产代表性传承人，致力于传统制茶工艺的传承与推广。",
    avatar: "/images/inheritor6.jpg",
    createTime: "2023-06-18",
    description: "<p>王顺明，男，武夷岩茶(大红袍)制作技艺国家级非物质文化遗产代表性传承人。</p><p>出生于1954年，是武夷茶制作技艺的重要传承人之一。从事武夷岩茶传统制作工艺40余年，熟练掌握武夷岩茶采摘、萎凋、做青、炒青、揉捻、烘焙等全套制作工艺。</p><p>其制作的武夷岩茶多次在国内外茶叶评比中获奖，其中《大红袍》在2022年中国国际茶叶博览会上荣获金奖。致力于武夷岩茶文化的传播，定期举办茶艺培训班和茶文化讲座。</p><p>现为武夷山市茶叶协会理事，武夷山茶艺师协会会长，武夷学院茶学专业兼职讲师。</p>"
  }
])

const total = ref(0)
const loading = ref(false)
const levelOptions = [
  { label: '国家级', value: '国家级' },
  { label: '省级', value: '省级' },
  { label: '市级', value: '市级' },
  { label: '县级', value: '县级' }
]

// 计算过滤后的数据
const filteredInheritorList = computed(() => {
  let result = [...allInheritorList.value]
  
  // 根据姓名过滤
  if (params.value.name) {
    result = result.filter(item => item.name.includes(params.value.name))
  }
  
  // 根据级别过滤
  if (params.value.level) {
    result = result.filter(item => item.level === params.value.level)
  }
  
  // 设置总数
  total.value = result.length
  
  // 分页处理
  const start = (params.value.pageNum - 1) * params.value.pageSize
  const end = start + params.value.pageSize
  return result.slice(start, end)
})

// 获取传承人列表（使用前端数据）
const getInheritorList = async () => {
  loading.value = true
  // 模拟加载延迟
  await new Promise(resolve => setTimeout(resolve, 500))
  loading.value = false
}

// 搜索
const handleSearch = async () => {
  params.value.pageNum = 1
  await getInheritorList()
}

// 重置
const handleReset = () => {
  params.value = { ...initParams }
  getInheritorList()
}

// 分页大小改变
const handleSizeChange = (val: number) => {
  params.value.pageSize = val
  params.value.pageNum = 1
  getInheritorList()
}

// 当前页改变
const handleCurrentChange = (val: number) => {
  params.value.pageNum = val
  getInheritorList()
}

// 计算属性
const hasData = computed(() => filteredInheritorList.value.length > 0)

onMounted(async () => {
  await getInheritorList()
})
</script>

<template>
  <div class="inheritor-page">
    <!-- 搜索表单 -->
    <div class="search-section">
      <div class="search-form">
        <div class="form-item">
          <label class="form-label">姓名：</label>
          <el-input 
            v-model="params.name" 
            placeholder="请输入传承人姓名" 
            clearable
            class="search-input"
          />
        </div>
        <div class="form-item">
          <label class="form-label">级别：</label>
          <el-select 
            v-model="params.level" 
            placeholder="请选择级别" 
            clearable
            class="search-select"
          >
            <el-option label="全部" value="" />
            <el-option 
              v-for="option in levelOptions" 
              :key="option.value" 
              :label="option.label" 
              :value="option.value" 
            />
          </el-select>
        </div>
        <div class="form-actions">
          <el-button type="primary" :icon="Search" @click="handleSearch" :loading="loading">
            搜索
          </el-button>
          <el-button type="default" :icon="Refresh" @click="handleReset">
            重置
          </el-button>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-section">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-text">加载中...</div>
      </div>

      <!-- 数据展示 -->
      <div v-else-if="hasData" class="inheritor-container">
        <div class="inheritor-grid">
          <InheritorCard 
            v-for="item in filteredInheritorList" 
            :key="item.id"
            :inheritor="item"
          />
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="empty-container">
        <div class="empty-content">
          <div class="empty-icon">👥</div>
          <h3 class="empty-title">暂无数据</h3>
          <p class="empty-description">没有找到相关的非遗传承人，请尝试调整搜索条件</p>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div v-if="hasData" class="pagination-section">
      <el-pagination
        v-model:current-page="params.pageNum"
        v-model:page-size="params.pageSize"
        :page-sizes="[12, 24, 36, 48]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 系统主题色
:root {
  --primary-color: #3498db;
  --primary-light: #5dade2;
  --primary-dark: #2980b9;
  --secondary-color: #2c3e50;
  --accent-color: #e74c3c;
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-light: #bdc3c7;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-light: #ecf0f1;
  --border-color: #e9ecef;
  --shadow-light: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.16);
}

.inheritor-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

// 搜索区域
.search-section {
  background: var(--bg-primary);
  padding: 32px 0;
  box-shadow: var(--shadow-light);
  position: relative;
  z-index: 2;
  border-radius: 20px 20px 0 0;
  
  .search-form {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
  }
  
  .form-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    .form-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }
    
    .search-input {
      width: 280px;
    }
    
    .search-select {
      width: 200px;
    }
  }
  
  .form-actions {
    display: flex;
    gap: 12px;
    margin-left: auto;
  }
}

// 内容区域
.content-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  
  .loading-text {
    font-size: 16px;
    color: var(--text-secondary);
  }
}

// 传承人网格
.inheritor-container {
  .inheritor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
    padding: 20px 0;
  }
}

// 空状态
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  
  .empty-content {
    text-align: center;
    padding: 40px;
    
    .empty-icon {
      font-size: 64px;
      margin-bottom: 20px;
    }
    
    .empty-title {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 12px;
    }
    
    .empty-description {
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.6;
    }
  }
}

// 分页区域
.pagination-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-light);
  
  :deep(.el-pagination) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    
    .el-pagination__sizes {
      margin-right: 16px;
    }
    
    .el-pagination__jump {
      margin-left: 16px;
    }
    
    .btn-prev,
    .btn-next,
    .el-pager li {
      min-width: 32px;
      height: 32px;
      line-height: 32px;
      border-radius: 6px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .search-section {
    padding: 24px 0;
    margin-top: -30px;
    
    .search-form {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      
      .form-item {
        .search-input,
        .search-select {
          width: 100%;
        }
      }
      
      .form-actions {
        margin-left: 0;
        justify-content: center;
      }
    }
  }
  
  .content-section {
    padding: 24px 16px;
  }
  
  .inheritor-container {
    .inheritor-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
  
  .pagination-section {
    padding: 24px 16px 40px;
    
    :deep(.el-pagination) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

@media (max-width: 480px) {
  .page-header {
    .page-title {
      font-size: 28px;
    }
  }
  
  .inheritor-container {
    .inheritor-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
}
</style>